<template>
	<view class="playing">
		<live-player
			id="livePlayer"
			class="livePlayer"
			:src="src"
			mode="live"
			:autoplay="true"
			:muted="false"
			orientation="vertical"
			background-mute="true"
			min-cache="2"
			max-cache="5"
		></live-player>
		<!-- 下面这种方式也能播放直播, 但是延迟比较高 -->
		<!-- <view class="livePlayer">
			<video class="livePlayer"
				:src="src"
				:autoplay="true"
				:muted="true"
				:is-live="true"
				:danmu-btn="true"
				:enable-danmu="true"
				:danmu-list="danmuList">
			</video>
		</view> -->
	</view>
</template>

<script>
	import request from '../../../utils/request';
	export default {
		data() {
			return {
				src: 'https://www.metamirror.cn:8085/profile/upload/2024/07/05/42ccaf200a3ecce15b64dbb275e07bbb.mp4',
				danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }],
				borderMembersId: '',
			}
		},
		onUnload() {
			console.log("直播播放页面被隐藏")
			clearInterval(this.interval);
		},
		onLoad(option) {
			console.log("播放链接为", option.broadUrl)
			this.src = option.broadUrl;
			this.borderMembersId = option.borderMembersId;
			this.context = uni.createLivePlayerContext('livePlayer', this)
			this.getBorderStatus();
		},
		methods: {
			// 根据用户id获取直播的状态
			getBorderStatus() {
				this.interval = setInterval(() => {
					request.GET(`/system/broadcast/status/${this.borderMembersId}`)
						   .then(response => {
							   console.log("状态", response)
							   if(response.data.broadstatus == 3) {
								   uni.showModal({
										title: "当前直播已经停止, 原因: " + 
												response.data.reason + 
												'请选择其他直播'
								   })
								   // 如果已经在推流了, 要停止推流
								   clearInterval(this.interval);
							   }
						   })
				}, 1000);
			},
		}
	}
</script>

<style>
.playing {
	width: 750rpx;
	height: 100vh;
}
.livePlayer {
	width: 750rpx;
	height: 100vh;
}
</style>
